<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:contact="http://www.contact.contact.com/contacts/contact/ui"
      xmlns:common="http://www.contact.common.com/contacts/ui"
        >

<ui:component>
    <style type="text/css">
        .top {
            vertical-align: top;
        }

        .columnOne {
            width: 350px;
        }

        .columnLeft {
            text-align: left;
        }
    </style>

    <h:form id="allContactForm">
        <h:panelGroup style="width:400px">
            <rich:toolBar id="allContactToolBar" width="100%">
                <rich:toolBarGroup>
                    <a4j:commandButton id="createContactButton"
                                       value="Add"
                                       reRender="contactModalPanel"
                                       disabled="#{not myContactBean.existModuleContact}"
                                       action="#{contactBean.prepareToAddContact}"
                                       oncomplete="Richfaces.showModalPanel('contactModalPanel');"
                                       limitToList="true">
                    </a4j:commandButton>

                    <a4j:commandButton id="updateContactButton"
                                       value="Update"
                                       reRender="contactModalPanel"
                                       action="#{contactBean.prepareToUpdateContact}"
                                       disabled="#{empty contactBean.focusedItem or
                                        (!contactBean.focusedItem.addsByMe)?'true' : 'false'}"
                                       limitToList="true"
                                       oncomplete="if(data)Richfaces.showModalPanel('contactModalPanel');"
                                       data="#{contactBean.selected}">


                    </a4j:commandButton>

                    <a4j:commandButton id="deleteContactButton"
                                       value="Delete"
                                       reRender="confirmContactModalPanel"
                                       action="#{contactBean.prepareToDeleteContact}"
                                       disabled="#{empty contactBean.focusedItem or
                                        (!contactBean.focusedItem.addsByMe)?'true' : 'false'}"
                                       oncomplete="if(data)Richfaces.showModalPanel('confirmContactModalPanel');"
                                       data="#{contactBean.selected}"
                                       limitToList="true">
                    </a4j:commandButton>
                </rich:toolBarGroup>
                <rich:toolBarGroup location="right" styleClass="myClass">
                    <h:inputText id="filterContactInput" autocomplete="on" value="#{contactSessionBean.filterContact}">
                        <a4j:support event="onkeyup" reRender="#{rich:clientId('allContactTable')}" ignoreDupResponses="true" requestDelay="700"/>
                    </h:inputText>
                </rich:toolBarGroup>
            </rich:toolBar>
            <a4j:outputPanel rendered="#{myContactBean.existModuleContact}">
                <h:panelGrid columns="2" rowClasses="top,top" columnClasses="columnOne, columnLeft">
                    <h:panelGroup id="allContactPanel" layout="block">
                        <contact:allContactTable/>
                       </h:panelGroup>
                    <h:panelGroup id="otherContactPanel" layout="block">
                        <contact:otherContact/>
                    </h:panelGroup>

                </h:panelGrid>

            </a4j:outputPanel>
            <rich:panel id="myContactPanelNotExist"
                        rendered="#{not myContactBean.existModuleContact}"
                        bodyClass="rich-laguna-panel-no-header"
                        style="width:100%; min-height:40px">
                <h:outputLabel
                        value="You have no permission to view other people contact. You must first create your own contact'card. ">
                    <a4j:commandLink value="Add"
                                     action="#{myContactBean.prepareToAddContactCard}"
                                     reRender="contactModalPanel"
                                     oncomplete="Richfaces.showModalPanel('contactModalPanel');"
                                     limitToList="true"
                            />
                </h:outputLabel>

            </rich:panel>

        </h:panelGroup>

    </h:form>

    <common:confirmModalPanel id="confirmContactModalPanel"
                              bean="#{otherContactBean}"
                              message="#{otherContactSessionBean.message}"
                              header="#{otherContactSessionBean.header}"
                              reRender="allContactForm"/>

</ui:component>


</html>